<template>
	<div id="box">
		<header>
			<p><router-link tag="i" to="/" class="iconfont icon-left"></router-link>
				<i class="iconfont icon-cart"></i></p>
			<dl v-for="v in pagehead">
				<dt><img :src="v.img"/></dt>
				<dd>
					<p>{{v.name}}</p>
					<p>{{v.ps}}/{{v.time}}分钟送达/配送费￥{{v.money}}</p>
					<p style="text-overflow: ellipsis;">公告：观影光临，用餐高峰期提前下单，谢谢。</p>
				</dd>
			</dl>
			<p><span>新用户下单立减17元</span><span>5个活动<em><i class="iconfont icon-xia-copy"></i></em></span></p>
		</header>
		<div @click="sp" class="headx">
			<router-link tag="p" to="/page2"><span>商品</span></router-link>
			<router-link tag="p" to="/pj"><span>评价</span></router-link>
			<router-link tag="p" to="/dp"><span>店铺</span></router-link>
		</div>
		<router-view/>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pagehead:[
					{
						img:"static/img/18.webp",
						name:"(吉野家)北京站点",
						ps:"商家配送",
						time:"47",
						money:5,
					}
				],
			}	
		},
		methods: {
			//事件
			sp(e){
				for(var i=0;i<this.ps.length;i++){
					this.ps[i].style.color = "#000"; 
					this.ps[i].style.borderBottomColor = "#000"; 
				}
				if(e.target.tagName=="SPAN"){
					e.target.style.color = "#0699FF";
					e.target.style.borderBottomColor = "#0699FF";
				}
				if(e.target.firstChild.tagName=="SPAN"){
					e.target.firstChild.style.color = "#0699ff";
					e.target.firstChild.style.borderBottomColor = "#0699FF";
				}
			},
		},
		mounted(){
			//原生js
			this.ps=document.querySelectorAll(".headx>p>span");
		}
	}
</script>

<style scoped lang="less">
	.px2rem(@name, @px) {
		@{name}: @px / 37.5 * 1rem;
	}
	header {
		.px2rem(height, 140);
		background: radial-gradient(rgb(157,97,90),rgb(192,169,179));
		.px2rem(padding-right,15);
		.px2rem(padding-left,15);
		&>p{
			display: flex;
			justify-content: space-between;
			.px2rem(font-size,21);
			color: white;
			.px2rem(height,44);
			.px2rem(line-height,30);
			i{
				.px2rem(font-size,21);
			}
		}
		&>p:last-child{
			.px2rem(font-size,12);
			i{
				.px2rem(font-size,8);
				.px2rem(margin-left,5);
			}
		}
		dl{
			display: flex;
			dt{
				.px2rem(width,66);
				.px2rem(height,66);
				.px2rem(margin-right,10);
				border: 1px solid #fff;
				border-radius:2% ;
				img{
					width: 100%;
					height: 100%;
				}
			}
			dd{
				display: flex;
				flex-direction: column;
				p{
					flex: 1;
					color: #fff;
					.px2rem(font-size,12);
				}
				p:first-child{
					.px2rem(font-size,18);
					font-weight:bold ;
				}
			}
			
		}
	}
	.headx{
		background:#fff ;
		.px2rem(height,40);
		display: flex;
		border-bottom: 1px solid #ccc;
		.px2rem(border-bottom-width,2);
		position: sticky;
		z-index: 999;
		top:-1px;
		p{
			flex: 1;
			display: flex;
			justify-content: center;
			align-content: center;
			span{
				height: 100%;
				.px2rem(line-height,40);
				.px2rem(font-size,15);
				font-weight: bold;
				border-bottom: 1px solid #000;
				.px2rem(border-bottom-width,3);
				box-sizing: border-box;
			}
			
		}
		p:first-child{
			span{
				color: #0699FF;
				border-bottom-color: #0699FF;
			}
		}
	}
	
</style>